import { CalendarProps } from ".";
import dayjs, { Dayjs } from "dayjs";
import useMergeState from "../utils/useMergeState";

interface MonthProps extends CalendarProps {}
function Month(props: MonthProps) {
  const { value, onChange } = props;
  const [curValue, setCurValue] = useMergeState<Dayjs>(
    value,
    { onChange }
  );
  // console.log(curValue.format("YYYY-MM-DD"));

  return (
    <div className="inline-flex mt-2">
      {[1, 2, 3, 4].map((day, i) => {
        return (
          <div
            key={i}
            className={[
              "h-30 w-30 inline-flex items-center  mx-2 justify-center",
              curValue.format("YYYY-MM-DD") ==
              "2025-04-0" + day
                ? "bg-blue-400 text-white"
                : "bg-gray-200",
            ].join(" ")}
            onClick={() => {
              setCurValue(dayjs("2025-04-0" + day));
            }}
          >
            {"2025-04-0" + day}
          </div>
        );
      })}
    </div>
  );
}

export default Month;
